<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCateGory_c, getCateGoryDataList_c } from '@/api/lidare'
import type { CategoryType, CategoryDataType } from '@/type/typings'
import { useRouter } from 'vue-router';
const router = useRouter()


const value = ref('');

// 侧边栏分类数据
const active = ref(0);
const categoryData = ref(<Array<CategoryType>>([]))

// 分类具体列表数据
const categoryDataList = ref<Array<CategoryDataType>>([])

const classId = ref('20')
const onChange = async () => {
  classId.value = categoryData.value[active.value].id
  await getCateGoryData()
}

const getCateGoryData = async () => {
  let { data: data1 } = await getCateGoryDataList_c(classId.value)
  categoryDataList.value = data1._data.classifyList
}

onMounted(async () => {
  let { data } = await getCateGory_c()
  categoryData.value = data._data.classifyList

  await getCateGoryData()

})

// 去到搜索页面进行搜索缓存
const historyData = ref(<Array<string>>([]));
historyData.value = JSON.parse(localStorage.getItem('historyList') as string) || [];
const goToSearch = (val: string) => {
  historyData.value = historyData.value.filter(o => o != val)
  historyData.value = [val, ...historyData.value]
  localStorage.setItem("historyList", JSON.stringify(historyData.value));
  router.push(`/searchResult/${val}`)
}
</script>
<template>
  <div class="class">
    <div class="class-head">
      <van-search v-model="value" disabled placeholder="清仓特价" class="ipt-box" @click="router.push('/search')" />
      <van-icon name="service-o" size="30" />
    </div>
    <div class="left-phone-list">
      <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item :title="c.name" v-for="c in categoryData" :key="c.id" />
      </van-sidebar>
    </div>
    <div class="rigt-phone-data">
      <img :src="categoryData[active]?.icon" alt="" class="data-bg">
      <div class="phone-data-box">
        <div class="data-box-item" v-for="item in categoryDataList">
          <div class="data-title">{{ item.name }}</div>
          <div class="data-list">
            <div class="data-item" v-for="el in item.children" :key="el.id" @click.stop="goToSearch(el.description)">
              <img :src="el.icon" alt="">
              <div class="desc">{{ el.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.class-head {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 20;
  background-color: #fff;

  .ipt-box {
    width: 88%;
  }

}

.left-phone-list {
  position: fixed;
  top: 64px;

  .van-sidebar-item--select:before {
    height: 100% !important;
    background-color: red !important;
  }

  .van-sidebar-item--select {
    color: var(--home-red) !important;
  }
}

.rigt-phone-data {
  width: 290px;
  position: absolute;
  top: 70px;
  right: 0;
  padding-bottom: 50px;

  .data-bg {
    width: 260px;
    height: 90px;
    margin: 20px auto;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .data-box-item {
    padding-left: 10px;
    margin-bottom: 15px;
  }

  .data-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    .data-item {
      width: 82px;
      margin-bottom: 10px;
      margin-right: 10px;
      padding: 3px;
      box-sizing: border-box;

      img {
        width: 100%;
        height: 80px;
      }

      .desc {
        margin-top: 4px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
      }
    }

  }
}
</style>
